<template>
  <div class="container">
    <div class="header">
      <h1>欢迎，管理员!</h1>
      <router-link to="login-button" @click="login">返回登录</router-link>
    </div>

    <table>
      <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in user" :key="user.id">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.address }}</td>
        <td class="action-button">
          <button class="action-button delete-button" @click="deleteUser(user.id)">删除</button>
          <button class="action-button edit-button" @click="editUser(user.id)">编辑</button>
        </td>
      </tr>
      </tbody>
    </table>
    <form v-if="editMode.isEditing" @submit.prevent="saveEdits">
      <input v-model="editedUser.name" placeholder="姓名" required/>
      <input v-model="editedUser.age" tyoe="number" placeholder="年龄" required/>
      <input v-model="editedUser.address"  placeholder="地址" required/>
      <button type="button">添加用户</button>
      <button type="submit">保存</button>
      <button type="button" @click="cancelEdits">取消</button>
      </form>
  </div>
</template>


<script>
import {pushScopeId} from "vue";

export default {
  data(){
    return{
      user:[
        {id:1,name:'张三',age:28,address:'广州市'},

      ],
      newUser:{
        name:'',
        age:null,
        address:'',
      },
      editedUser:{
        name:'',
        age:null,
        address:'',
      },
      editMode:{
        user:null,
        isEditing:false,
      },
      nextId:2,
    };
  },
  methods:{
    pushScopeId,
    login(){
      console.log('登录按钮被点击');
    },
    addUser(){
      if (this.newUser.name && this.newUser.age !== null){
        this.users.push({...this.newUser, id:this.nextId++});
        this.newUser = {name:'',age:null,address:''};
      }else{
        alert('请添加所有字段');

      }
    },
    deleteUser(id){
      this.user = this.users.filter(user => user.id !== id);
    },
    editUser(user){
      this.editedUser = {...user };
      this.editMode.user = user;
      this.editMode.isEditing = true;

    },
    saveEdits(){
      const index = this.user.findIndex(user => user.id === this.editedUser.id);
      if(index !== -1){
        this.user.splice(index, 1,{...this.editedUser});
        this.editMode.isEditing = false;
        this.editedUser = {id:null,name:'',age:null,address:''};
      }
    },
    cancelEdits(){
      this.editMode.isEditing = false;
      this.editedUser = {id :null,name:'',age:null,address:'' }
    }
  }
};
</script>
<style scoped>
.container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 90%;
  margin: auto;
}
.header {
  text-align: center;
  margin-bottom: 20px;

}
.login-button {
  padding: 10px;
  border: none;
  background-color: #535bf2;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}
.login-button:hover {
  background-color: #535bf2;
}
th,td{
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
th{
  background-color: #f2f2f2;
}
.action-buttons{
  display: flex;
  justify-content: center;
}
.action-button{
  margin: 0 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.delete-button{
  background-color: #dc3545;
  color: white;
}
.delete-button:hover{
  background-color: #535bf2;
}
.edit-button{
  background-color: #535bf2;
  color: black;
}
.edit-button:hover{
  background-color: #535bf2;
}
</style>